<template>
  <div class="comment">
    <span>评论({{ total }})</span>
    <div class="good" v-if="typemoxing == 1">
      <span>满意度：</span>
      <el-rate v-model="value" allow-half @change="change" />
    </div>
    <commentinput @sendType="sendType" :typeID="typeID" :uid="uid"></commentinput>
    <commentList
      v-if="firstdatalist"
      @openCallClick="openCallClick"
      :typeID="typeID"
      :listcheck="listcheck"
      :firstdatalist="firstdatalist"
    ></commentList>

    <div class="openping f-a-c f-j-a-c click" @click="opencommen" v-if="total > 1">
      <span>展开查看评论</span>
      <svg-icon name="icon-zk"></svg-icon>
    </div>
    <drawpopComment
      v-show="commentCheck"
      :title="title"
      @closeClick="closeClick"
      :allcomment="allcomment"
      :commentCheck="commentCheck"
      @drwapop="drwapop"
      :firstdatalist="firstdatalist"
    ></drawpopComment>
  </div>
</template>

<script>
import { evaluate, commentGet } from "@/axios/api.js";
import drawpopComment from "./drawpopComment.vue";
import { ElMessage } from "element-plus";

import commentList from "./commentList.vue";
import commentinput from "./commentinput.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  nextTick,
  onUpdated,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  props: {
    typemoxing: {
      type: [String, Number],
      default: 0,
    },

    myEvaluate: {
      type: [String, Number],
      default: 0,
    },
  },
  components: {
    commentList,
    drawpopComment,
    commentinput,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      value: 0,
      text: "",
      commentCheck: false,
      allcomment: false,
      title: "",
      datalist: [],
      total: 0,
      listcheck: false,
      totals: 0,
      firstdatalist: [],
      typeID: 0,
      uid: "",
      // nowcomment: [],
    });
    let detailid = computed(() => {
      return store.state.detailid;
    });

    onMounted(() => {
      data.typeID = router.currentRoute._value.query.id;
      getcommentGet();
    });
    onUnmounted(() => {});
    onUpdated(() => {
      data.value = props.myEvaluate;
    });
    // 所有评论刷新
    let drwapop = () => {
      sendType();
    };
    let sendType = (value) => {
      data.commentCheck = false;
      data.allcomment = false;
      getcommentGet();
      // yijicommeng(value);
    };
    let yijicommeng = (id, type) => {
      let datas = {};
      datas.parentId = id;
      datas.modelId = 0;
      datas.page = 1;
      datas.limit = 10;
      commentGet({
        ...datas,
      }).then((res) => {
        data.totals = res.data.total;
        if (data.total == 0) {
          data.listcheck = false;
        } else {
          data.listcheck = true;
        }
      });
    };
    // 评论列表
    let getcommentGet = () => {
      let datas = {};
      datas.parentId = 0;
      datas.page = 1;
      datas.limit = 10;
      datas.modelId = data.typeID;
      commentGet({
        ...datas,
      }).then((res) => {
        data.firstdatalist = res.data.records[0];
        if (res.data.records.length) {
          data.uid = data.firstdatalist.uid;
        }
        data.total = res.data.total;

        // store.commit("setinfomessage", JSON.stringify(res.data.records[0]));
        // yijicommeng(res.data.records[0].id);
      });
    };
    // 评分
    let change = (e) => {
      // console.log(props.myEvaluate);
      if (props.myEvaluate != 0) {
        ElMessage.warning("已评价");
        return;
      }
      evaluate({
        amount: data.value,
        modelId: data.typeID,
      })
        .then((res) => {
          emit("pingjiasuccess", e);
          ElMessage.success("评分成功");
        })
        .catch((err) => {
          ElMessage.warning("已评价");
        });
    };
    // 打开所有评论
    let opencommen = () => {
      // getcommentGet();
      data.commentCheck = true;
      data.allcomment = true;
      data.title = "所有评论";
    };
    let openCallClick = async (value) => {
      await getcommentGet();
      data.commentCheck = true;
      data.allcomment = false;
      data.title = "当前评论";
    };
    let closeClick = () => {
      // data.commentCheck = false;
      // data.allcomment = false;
    };
    return {
      yijicommeng,
      drwapop,
      sendType,
      change,
      closeClick,
      openCallClick,
      opencommen,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.comment {
  width: 1000px;
  margin: 0 auto;
  margin-top: 70px;

  > span {
    font-size: 18px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .good {
    margin-top: 18px;
  }
  .comment_item {
    margin-top: 22px;
    > img {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
    .input {
      width: 820px;
      height: 50px;
      opacity: 1;
      > input {
        background: #f3f4f5;
        border-radius: 10px 10px 10px 10px;

        border: none;
        width: 100%;
        height: 100%;
        padding-left: 10px;
      }
    }
    .send {
      margin-left: 10px;
      width: 100px;
      height: 50px;
      background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #ffffff;
      }
      &:active {
        opacity: 0.7;
      }
    }
  }
  .openping {
    margin-top: 30px;
    margin-bottom: 39px;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      margin-right: 6px;
      color: #656f79;
    }
  }
}
</style>
